<template>
  <div>
    <div class="bod">
    <ul>
      <li  v-for="(v,i) in arr" :key="i">
        <div class="tu">
          <img src="../../../public/lzc/l1.gif" alt="" srcset="" />
        </div>
        <div class="z1">
          <h4>法国正紧补水保湿舒缓玫瑰水200ml</h4>
          <span class="sp1">￥365</span>
          <div class="f1">
            <div class="pic">
              <img src="../../../public/lzc/1.png" alt="" srcset="" />
            </div>
            <div>
              <h5>河狸家|邻里（民乐园店）</h5>
              <span class="sp2">暂无评定</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      arr:
      [
          {img:"../../../public/lzc/1.png",title:"法国正紧补水保湿舒缓玫瑰水200ml"},
          {img:"../../../public/lzc/2.png",titile:"德国正紧补水保湿舒缓玫瑰水200ml"},
          {img:"../../../public/lzc/3.png",titile:"中国正紧补水保湿舒缓玫瑰水200ml"},
          {img:"../../../public/lzc/4.png",titile:"巴基斯坦正紧补水保湿舒缓玫瑰水200ml"},
          {img:"../../../public/lzc/4.png",titile:"巴基斯坦正紧补水保湿舒缓玫瑰水200ml"},
          {img:"../../../public/lzc/4.png",titile:"巴基斯坦正紧补水保湿舒缓玫瑰水200ml"},
      ]
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

ul {
  width: 100%;
  /* background-color: white; */
}
li {
  height: 2.5rem;
  display: flex;
  border: 1px 0 solid fuchsia;
  padding:0  0.1rem;
  background-color: white;
  margin-top: 0.1rem;
}
.tu {
  width: 1.5rem;
  height: 1.5rem;
  background-color: white;
  margin-top: 0.45rem;
}
.tu img {
  width: 100%;
  height: 100%;
}
.z1{
   margin-top: 0.45rem;
}
.z1 .sp1 {
  color: red;
}
.z1 h4 {
  height: 0.6rem;
}
.f1 {
  display: flex;
}
.f1 .pic {
  margin-top: 0.2rem;
  width: 0.22rem;
  height: 0.22rem;
}
.f1 div img {
  width: 100%;
  height: 100%;
}
 .f1 .sp2{
  color: gray;
  font-size: 0.10rem;
}
.bod{
  background-color: gainsboro
}  
</style>